<template class="el-main">
  <!-- 搜索框与logo -->
  <div class="main-search">
    <el-form inline>
      <el-form-item class="Logo">
        <div class="logo-content"></div> <!-- 使用 div 来放置 Logo -->
      </el-form-item>
      <el-form-item class="search">
        <el-input placeholder="搜索..."></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="foodSearch">搜索</el-button>
      </el-form-item>
    </el-form>
  </div>

  <div class="main-store">
    <div class="main-store-area">
      <ul class="food-list">
        <li v-for="(item, index) in foodList" :key="index" class="item">
          <div class="img_box" @click="foodInfo(item.foodId)">
            <img :src="item.foodImageUrl" alt="Food Image" />
            <p v-html="item.foodName"></p>
            <span :style="{ color: 'red' }">&yen;{{ item.foodPrice }}</span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { foodItemsService } from "@/api/food.js";
import { onMounted, ref } from "vue";
import router from "@/router";

// 定义商品表单数据
const foodList = ref([]);

onMounted(async () => {
  try {
    const response = await foodItemsService(); // 调用 foodItemsService 获取数据
    foodList.value = response.data; // 将获取的数据赋值给 foodList
    console.log(foodList.value); // 打印数据确认
  } catch (error) {
    console.error('Failed to fetch food list:', error);
  }
});


const foodInfo = (foodId) => {
  router.push({ path: '/buyer/foodInfo', query: { foodId: foodId } });
};
</script>

<style scoped>
.el-main {
  margin-top: 0;
}

.main-search {
  display: flex; /* 使用 Flexbox 布局 */
  justify-content: center; /* 水平居中对齐 */
}

.Logo {
  height: 63px;
  width: 60px; /* 设置 Logo 宽度 */
  background: url('@/assets/OIP2.png') no-repeat center / 120px auto;
}

.logo-content {
  height: 100%; /* 让 Logo 适应 el-form-item 的高度 */
}

.el-input {
  margin-left: 2px; /* 与 Logo 之间的间距 */
  width: 700px;
  height: 50px;
}

.main-store {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: flex-start; /* 垂直从顶部开始 */
  height: 100vh;
}

.main-store-area {
  width: 1200px; /* 宽度 */
  min-height: 1000px;
  background-color: white;
}

.food-list {
  display: flex;
  flex-wrap: wrap; /* 允许换行 */
  justify-content: center; /* 水平居中 */
  padding: 0;
  list-style-type: none; /* 去掉默认样式 */
}

.item {
  width: 216px;
  height: 340px;
  margin: 15px 4px 23px;
  text-align: center;
  background: #fff;
  box-shadow: 0px 0px 10px silver;
  border-radius: 10px;
  transition: border 0.4s;
}

.item:hover {
  border: 0.3px solid orange; /* 悬停时的边框样式 */
  padding: 5px;
}

.img_box {
  cursor: pointer;
  width: 189px;
  height: 200px;
  margin: 40px auto;
}

.img_box img {
  width: 192px;
  height: 202px;
  border-radius: 10px;
}

.item p {
  font-size: 1px;
  line-height: 16px;
  height: 40px;
  padding: 0 10px;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
</style>
